import { FC,useEffect, useState } from 'react';
import { Button, Form, Input, Modal } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { message, Upload } from 'antd';
import type { GetProp, UploadProps } from 'antd';
const Index: FC<any> = (props:any) => {


  const [form]=Form.useForm();
  // console.log(111111111,props);
  

  // const handleOk=()=>{

  // //  let datas= form.getFieldsValue();
  // //  console.log(11111111111,datas);
   
    
  //    form.submit();
  // }
  // const handleCancel=()=>{
  //   props.close();
  // }
  const onFinish=(data:any)=>{

    console.log(111111111,data);
    
  }
    useEffect(()=>{
    },[])
    const [loading, setLoading] = useState(false);
    const uploadButton = (
      <button style={{ border: 0, background: 'none' }} type="button">
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </button>
    );
  
    const headers={Authorization:sessionStorage.getItem("token")!}

    const [imageUrl, setImageUrl] = useState<string>();
    const handleChange: UploadProps['onChange'] = (info:any) => {

      console.log(88888,info);
      
      if (info.file.status === 'uploading') {
        setLoading(true);
        return;
      }
      if (info.file.status === 'done') {
        setLoading(false);
        // console.log(99999,info);
         if(info.file.response.errCode==10000){

          setImageUrl(info.file.response.data);
          // console.log(99999,info.file.response.data);
         }
       
      }
    };

    return (
      <Modal title={props.data.id===0 ? "添加" :"修改"} open={true} onOk={form.submit} onCancel={props.close}>
  
              <Form form={form} initialValues={props.data} onFinish={onFinish}>
                <Form.Item label="头像">

                <Upload
        name="file"
        listType="picture-card"
        showUploadList={false}
        action={import.meta.env.VITE_BASE_URL+'api/upload/add'}
        headers={headers}
        onChange={handleChange}
      >
        {imageUrl ? <img src={import.meta.env.VITE_BASE_IMG_URL+imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>

                </Form.Item>
                <Form.Item label="姓名" name="name"  rules={[{ required: true, message: '请输入姓名' }]}>
                  <Input></Input>
                </Form.Item>
                <Form.Item label="手机号" name="mobile">
                  <Input></Input>
                </Form.Item>
              </Form>

    </Modal>
    )
}
export default Index;